<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/10/28
  Time: 14:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增页</title>
    <!-- 引入layui.css--->
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <!---引入layui.js-->
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/static/js/jquery-3.5.1.min.js"></script>
    <script src="${path}/static/js/ajaxForm.js"></script>
</head>
<body>
    <div class="layui-container">
        <form  class="layui-form" method="post" action="" id="myForm">
            <!--每一行表单块-->
            <div class="layui-form-item">
                <!-- 表单项说明 -->
                <label class="layui-form-label">员工编号</label>
                <!-- 表单组件 -->
                <div class="layui-input-inline">
                    <input type="text" name="empNo" class="layui-input" lay-verify="required|number"/>
                </div>
                <label class="layui-form-label">员工姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="eName" class="layui-input" lay-verify="eName"/>
                </div>
            </div>
            <!-- 图片上传区域 -->
            <div class="layui-form-item">
                <label class="layui-form-label">员工头像</label>
                <div class="layui-input-inline">
                    <div class="layui-upload-drag" id="headImg">
                        <i class="layui-icon">&#xe67c;</i>
                        <p>选择图片</p>
                    </div>
                </div>
                <div class="layui-input-inline">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" style="max-width: 100px;max-height: 100px" id="imgShow">
                        <p id="demoText"></p>
                        <input type="hidden" name="face" id="face"/>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">工作岗位</label>
                <div class="layui-input-inline">
                    <input type="text" name="job" class="layui-input"/>
                </div>

                <label class="layui-form-label">入职时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="hireDate" class="layui-input" id="hireDate"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">直属经理</label>
                <div class="layui-input-inline">
                    <select name="mgr" id="mgr">
                    </select>
                </div>
                <label class="layui-form-label">所属部门</label>
                <div class="layui-input-inline">
                    <select name="deptNo">
                        <option value="10">财务部</option>
                        <option value="20">研究部</option>
                        <option value="30">销售部</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">工资</label>
                <div class="layui-input-inline">
                    <input type="text" name="sal" class="layui-input" lay-verify="number"/>
                </div>
                <label class="layui-form-label">奖金</label>
                <div class="layui-input-inline">
                    <input type="text" name="comm" class="layui-input" lay-verify="number"/>
                </div>
            </div>

            <!-- 按钮部分
                lay-submit 声明它是一个提交按钮
            -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="uploadImg" lay-submit lay-filter="empForm">保存</button>
                    <button class="layui-btn" type="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script>
    var form,layer,layDate,upload;
    var isImage = false; //是否选择了头像
    layui.use(['layer','form','laydate','upload'],function(){
        form = layui.form;
        layer = layui.layer;
        layDate = layui.laydate;
        upload = layui.upload;

        layDate.render({
            elem : '#hireDate',  //要渲染时间组件的元素对象
            type : 'date'
        });

        form.verify({
            //自定义规则的名字
            eName : function(value, item){  //value：表单的值、item：表单的DOM对象
                if(value.length > 10){
                    return '名字太长了！';
                }
            }
        });

        //动态渲染下拉框
        $.ajax({
            url : '${path}/emp/list',
            dataType : 'json',
            success : function(data){
                //动态为经理下拉框生成选项
                var list = data.data;
                for(i=0;i<list.length;i++){
                    var eName = list[i].eName;//员工姓名
                    var empNo = list[i].empNo;//员工号
                    $('#mgr').append('<option value="'+ empNo+'">' + eName + '</option>');
                    //让layui的form表单，重新渲染一次select选项
                    form.render('select');
                }
            }
        });

        //渲染文件上传组件
        var uploadInst = upload.render({
            elem: '#headImg'
            , url: '${path}/emp/upload'
            , size: 500    //限制文件大小，单位为 kb
            , accept : 'images'  //限制上传的必须是图片
            , auto : false //取消自动上传
            , bindAction : '#uploadImg'
            , choose: function (obj) {  //选择完成后的回调函数
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    console.log(index);//文件的下标
                    console.log(file);//文件的对象
                    $('#imgShow').attr('src', result); //文件的base64编码（base64）
                });
                isImage = true;//标识当前已经选择了头像
            }
            , done: function (res) {   //上传成功后的回调函数  res就是服务器响应的json对象
                //判断是否真正上传成功
                if(res.code != 0){
                    layer.msg('上传失败！服务器上传接口异常！');
                    return;
                }
                layer.msg('上传成功');
                //上传成功
                //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                $('#face').val(res.url);
                $('#demoText').html('<span style="color: #8f8f8f;">上传成功!!!</span>');

                //手动提交表单
                $("#myForm").ajaxSubmit({
                    url : '${path}/emp/add',
                    type : 'post',
                    dataType : 'json',
                    success : function(data){
                        layer.msg(data.message);//弹出新增结果
                        //关闭当前弹出层
                        var index = parent.layer.getFrameIndex(window.name); // 获得frame索引
                        parent.layer.close(index); //关闭当前frame
                        parent.reload(); // 可以对父窗口进行刷新
                    }
                });
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        //表单监听提交事件 在监听提交事件之前，会自动触发表单的校验
        form.on('submit(empForm)',function(){
            if(isImage){
                //选择了头像，不需要做任何操作
                return false;
            }else{
                //手动异步提交
                $("#myForm").ajaxSubmit({
                    url : '${path}/emp/add',
                    type : 'post',
                    dataType : 'json',
                    success : function(data){
                        layer.msg(data.message);//弹出新增结果
                        //关闭当前弹出层
                        var index = parent.layer.getFrameIndex(window.name); // 获得frame索引
                        parent.layer.close(index); //关闭当前frame
                        parent.layui.table.reload('dataTable'); // 可以对父窗口进行刷新
                    }
                });
                return false;//阻止原表单提交
            }
        });

    });
</script>
</html>
